import React from 'react'
import '../css/tabbar.css'
import { TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageFill,
    UnorderedListOutline,

  } from 'antd-mobile-icons'
import { withRouter } from 'react-router-dom'

function MiaoTabbar(props) {
    const tabs = [
        {
          key: '/films',
          title: '电影',
          icon: <AppOutline />,
        },
        {
          key: '/cinemas',
          title: '影院',
          icon: <UnorderedListOutline />,
        },
        {
          key: '/me',
          title: '我的',
          icon: <MessageFill />,
        },
      ]
  return (
    <div>
        <TabBar onChange={(value)=>{
            props.history.push(value)
        }}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default withRouter(MiaoTabbar);